<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>找回密码</title>
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/own.css" />
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script src="../../js/jquery-1.11.3.js"></script>
		<link rel="stylesheet" href="../../css/quotation.css" />
		<style>
			body {
				background-color: #2B2B2B;
			}
			/*图形验证码*/
			
			#codelayer {
				background-color: rgba(0, 0, 0, .7);
				display: none;
			}
			
			#codelayer .contnet {
				padding: 10px 0;
				width: 240px;
				height: 140px;
				background: #fff;
				position: fixed;
				left: 50%;
				top: 50%;
				margin-left: -120px;
				margin-top: -70px;
				color: #333;
				border-radius: 5px;
			}
			
			#codelayer .contnet input {
				width: 50%;
				text-align: left;
				font-size: 12px;
				padding: 0;
				padding-left: 10px;
			}
			
			#cz {
				margin-top: 19px;
			}
			
			#cz span {
				width: 50%;
				display: inline-block;
				color: #333;
				text-align: center;
				height: 40px;
				line-height: 40px;
			}
			
			#cz span:active {
				background: #999999;
			}
			/*图形验证码结束*/
		</style>
	</head>

	<body>
		<!--打开验证码框-->
		<div class="mui-backdrop" id="codelayer" style="">
			<div class="contnet">
				<p style="color: #333; text-align: center;">请先输入图形验证码</p>
				<div style="margin-top: 10px; padding: 0 10px; height: 40px;">
					<input type="text" id="refresh_code_value" value="" maxlength="5" placeholder="图形验证码" oninput="checkValue()" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
					<img src="" style="width: 46%; height: 38px; position: relative; top: 14px;" id="refresh_code" />
				</div>
				<p id="cz"><span id="cancel">取消</span><span id="confirm">确认</span></p>
			</div>
		</div>
		<header class="mui-bar mui-bar-nav own-topbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="back"><i>返回</i></a>
			<h1 class="mui-title">找回密码</h1>
			<a href="javascript:void(0)" class="top-tel" id="online">在线客服</a>
		</header>
		<div class="mui-content">
			<div id="inputList">
				<div class="commStyle">
					<label>手机号码：</label>
					<input type="tel" placeholder="请输入您的手机号" id='account' oninput="checkValue()" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
					<img src="../../images/close.png" id="accountClear">
				</div>
				<div class="commStyle">
					<input type="number" placeholder="请输入您的验证码" id="codeInput" oninput="checkValue()" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
					<button type="button" id="code">发送验证码</button>
				</div>

				<div class="commStyle">
					<label>重置密码：</label>
					<input type="password" placeholder="输入6-16位字母和数字组合" id='password' oninput="checkValue()" />
					<img src="../../images/close.png" id="accountClear">
				</div>
				<div class="commStyle">
					<label>确认密码：</label>
					<input type="password" placeholder="请再次输入密码" id="confirm_password" oninput="checkValue()" />
					<img src="../../images/close.png" id="passwordClear">
				</div>
				<div class="mui-content-padded">
					<button class="mui-btn mui-btn-block" id="operateLogin">确认提交</button>
				</div>
			</div>

			<!--<p id="callService">客服热线：400-180-1860</p>-->
		</div>
		<script>
			var width = window.innerWidth;
			var userCode = "";
			$("#codeInput").css({
				"margin-left": 48 + "px"
			})
			mui.plusReady(function() {
				/*绑定事件
				 */
				$("#accountClear").click(function() {
					$("#account").val("");
					checkValue();
				});
				$(".mui-content").css({
					"opacity": "1"
				})
				/*重新获取图形验证码*/
				document.getElementById("refresh_code").addEventListener("tap", function() {
					var mobile = document.getElementById("account").value;
					$("#refresh_code").attr("src", tzdr.constants.api_domain + "sendImageCode?1=" + Math.random() * 1000 + "&mobile=" + mobile);
				});
				//退出图形验证码框
				document.getElementById("cancel").addEventListener("tap", function() {
					$("#codelayer").css("display", "none");
				});
				//获取验证码
				document.getElementById("code").addEventListener("tap", function() {
					getCode();
				})
				function getCode() {
					var mobile = document.getElementById("account").value;
					//这里要对手机号码进行格式校验
					if(!tzdr.validate_mobile(mobile) || mui.isnull(mobile)) {
						mui.toast("请输入正确的手机号");
						return;
					}
					var paramUrl = {
						url: "login.html"
					}
					mui.app_request('sms', {
						'mobile': mobile,
						'type': 2,
					}, function(result) {
//						console.log("找回密码验证码返回：" + JSON.stringify(result))
						mui.toast("发送成功！");
						var o = document.getElementById("code");
						tzdr.smsTime(o);
						return;
					}, function(result) {
//						console.log("找回密码验证码返回：" + JSON.stringify(result))
						var wrongTime = result.data;
						if(wrongTime != undefined && wrongTime != null && wrongTime >= 2) {
							//弹出图形验证码
							$("#codelayer").css("display", "block");
							$("#refresh_code").attr("src", tzdr.constants.api_domain + "sendImageCode?1=" + Math.random() * 1000 + "&mobile=" + mobile);
//							console.log("短信验证码："+tzdr.constants.api_domain + "sendImageCode?1=" + Math.random() * 1000 + "&mobile=" + mobile)
							$("#refresh_code_value").focus();
							document.getElementById("confirm").addEventListener("tap", function() {
								var refresh_code_value = $("#refresh_code_value").val();
								userCode = refresh_code_value;
								if(mui.isnull(refresh_code_value)) {
									mui.toast("验证码不能为空！");
									return;
								}
								var paramUrl = {
									url: "login.html"
								}
								mui.app_request('sms', {
									'mobile': mobile,
									'type': 2,
									'yzm': refresh_code_value
								}, function(result) {
									if(result.code == 1){
										mui.toast(result.message);
										var o = document.getElementById("code");
										tzdr.smsTime(o);
										$("#codelayer").css("display", "none"); //发送成功隐藏图形验证码框
									}							
									return;
								}, function(result) {
									var refresh_code_value = $("#refresh_code_value").val("");
									$("#refresh_code").attr("src", tzdr.constants.api_domain + "sendImageCode?1=" + Math.random() * 1000 + "&mobile=" + mobile);
//									console.log(JSON.stringify(result))
									mui.toast(result.message)
								}, paramUrl)
							});
							return;
						}
						if(result.code == 2) {
							mui.toast("找回密码短信发送失败！");
							return;
						} else if(result.code == 3) {
							mui.toast("手机号码已经存在！");
							return;
						} else if(result.code == 4) {
							mui.toast("手机号码不存在！");
							return;
						} else if(result.code == 5) {
							mui.toast("操作过于频繁，请稍候再试（60s内重复调用）！");
							return;
						} else if(result.code == 6) {
							mui.toast("电话号码格式错误！");
							return;
						} else if(result.code == 7) {
							mui.toast("超过短信每天发送次数限制（5次）！");
							return;
						} else if(result.code == 8) {
							mui.toast("请输入正确的验证码！");
							return;
						}

					}, paramUrl);
				}
				//确认提交
				document.getElementById("operateLogin").addEventListener("tap", function() {
					registUser()
				});

				function registUser() {

					var mobile = document.getElementById("account").value;
					var code = document.getElementById("codeInput").value;
					var password = document.getElementById("password").value;
					var password2 = document.getElementById("confirm_password").value;
					var paramUrl = {
						url: "login.html"
					}
//					console.log("电话：" + mobile + "验证码：" + code + "密码：" + password)
					if(mui.isnull(password)) {
						mui.toast("登录密码不能为空！");
						return;
					}
					if(mui.isnull(password2)) {
						mui.toast("确认密码不能为空！");
						return;
					}

					if(!tzdr.validate_password(password)) {
						mui.toast("密码由6-16位数字和字母组成。");
						return;
					}
					//校验登录密码与确认密码是否一致
					if(password != password2) {
						mui.toast("两次输入密码不一致，请重新输入");
						return;
					}
					mui.app_request('/reset_password', {
						'mobile': mobile,
						'password': password,
						'code': code
					}, 
					function(result) {
						//updateMockAccount(mobile,password);
						if(result.code == 1){
								console.log("找回密码返回：" + result.code + JSON.stringify(result.message))
								mui.toast("密码重置成功，请重新登录！");
								mui.openWindow("login.html");
								return;
							}	
					},
					function(result) {						
//						console.log("找回密码返回：" + JSON.stringify(result.message))
						if(result.code == 2) {
							mui.toast("您没有获取短信验证码");
							return;
						} else if(result.code == 3) {
							mui.toast(" 该用户还未注册！");
							return;
						} else if(result.code == 4) {
							mui.toast("验证码失效！");
							return;
						} else if(result.code == 5) {
							mui.toast("验证码错误！");
							return;
						} else if(result.code == 6) {
							mui.toast("密码格式有误！");
							return;
						} else {
							mui.toast("网络异常，请稍后再试！");
							return;
						}

					}, paramUrl);

				}

				
				/*document.getElementById("telBtn").addEventListener("tap",function(){
					mui.callService();
				})*/
				/*document.getElementById("callService").addEventListener("tap",function(){
					mui.callService();
				})*/

			})
			/*按钮变色*/
			function checkValue() {
				var account = $("#account").val();
				var codeInput = $("#codeInput").val();
				if(account.length > 0 && codeInput.length > 0) {
					$("#operateLogin").css({
						"background-color": "#fcc900"
					});
				} else {
					$("#operateLogin").css({
						"background-color": "#cccccc"
					});
				}
				if(account == "" || account == null || account.length == 0) {
					$("#accountClear").css({
						"display": "none"
					});
				}
				if(codeInput == "" || codeInput == null || codeInput.length == 0) {
					$("#passwordClear").css({
						"display": "none"
					});
				};
				if(account.length > 0) {
					$("#accountClear").css({
						"display": "block"
					});
				}
				if(codeInput.length > 0) {
					$("#passwordClear").css({
						"display": "block"
					});
				}
			}
			/*
			 * 下方的客服热线
			 */
			var i = 0;
			$(window).resize(function() {
				if(i % 2 == 0) {
					$("#callService").css("display", "none");
				} else {
					$("#callService").css("display", "block");
				}
				i++;
			});
			tzdr.online();
		</script>
	</body>

</html>